<template>
    <div class="searchBar">
        <ul v-for="item in fuzzyQueries">
            <li @click="detail(item)">{{ item.title }}</li>
        </ul>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "SearchBar",
    props: ['fuzzyQueries'],
    data() {
        return {
            display: false,
        }
    },
    mounted() {
    },
    methods: {
        detail(item) {
            if (item.title === "请输入~")
                return
            this.$emit("empty")
            window.localStorage.setItem("essayInfo", JSON.stringify(item))
            this.$router.replace({path: '/homeBlankPage'});
        }
    }
}
</script>

<style scoped>
.searchBar {
    position: absolute;
    left: 0;
    top: 0;
    width: 5vw;
    min-width: 150px;
    background: #ecefec;
    margin-left: 0.6vw;
    margin-top: 3.4vh;
}

.searchBar ul {
    list-style: none;
}

.searchBar ul li {
    width: 150px;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 0.2rem 0.5rem;
    text-align: left;
    font-size: 1em;
    border-radius: 5px;
}

.searchBar ul li:hover {
    background: rgba(174, 178, 174, 0.3);
    cursor:pointer;
}

.searchBar ul li a {
    color: #5494e8;
}
</style>